<!--
 * User: CHT
 * Date: 2020/6/28
 * Time: 17:48
-->
<template>
  <div style="width: 100%;height: 100%" id="app">
    <el-container style="height: 100%;width: 100%">
      <el-aside width="200px" style="height: 100%">
        <el-menu
            :router="true"
            style="height: 100%"
            :default-active="path"
            class="el-menu-vertical-demo"
            background-color="rgb(27, 36, 49)"
            text-color="#fff"
            active-text-color="rgb(15, 255, 255)">
          <el-menu-item index="/">
            <i class="el-icon-menu"></i>
            <span slot="title">模型设计</span>
          </el-menu-item>
          <el-menu-item index="/DataSource">
            <i class="el-icon-document"></i>
            <span slot="title">数据源</span>
          </el-menu-item>
          <el-menu-item index="/ModelManager">
            <i class="el-icon-document"></i>
            <span slot="title">模型管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
          <router-view></router-view>
      </el-main>
    </el-container>

  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      path:"/"
    }
  },
  watch:{
    $route:{
      handler: function() {
        this.handler()
      },
      deep:true
    }
  },
  mounted(){

  },
  methods:{
    handler(){
      this.path=this.$router.history.current.fullPath
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.el-menu .el-menu-item.is-active{
  background-color: rgb(22,29,39) !important;
}
.el-menu li:hover{
  background-color: rgb(22,29,39) !important;
}
</style>
